import { FC, useState } from 'react';
import { Card, Button, Space, notification, Drawer, message,  } from 'antd';
import { SearchOutlined, PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { DrawerProps } from 'antd/es/drawer';
const index: FC = () => {
  const [load, setLoad] = useState<boolean>(false);
  const handleClick = () => {
    setLoad((load) => !load);
  }
  const openNotificationWithIcon = (type: 'success' | 'info' | 'error' | 'warning') => {
    notification[type]({
      message: 'Notification Title',
      description:
        'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    });
  };
  const [visible, setVisible] = useState(false);
  const [size, setSize] = useState<DrawerProps['size']>();
  const showDefaultDrawer = () => {
    setSize('default');
    setVisible(true);
  };
  const showLargeDrawer = () => {
    setSize('large');
    setVisible(true);
  };
  const onClose = () => {
    setVisible(false);
  };
  const success = () => {
    message.success('This is a success message');
  };

  const error = () => {
    message.error('This is an error message');
  };

  const warning = () => {
    message.warning('This is a warning message');
  };

  return (
    <Space direction="vertical" style={{ width: "100%" }}>
      <Card title="基础按钮" bordered={false} style={{ width: "100%" }}>
        <Space>
          <Button type="primary" size="large">Primary Button</Button>
          <Button>Default Button</Button>
          <Button type="dashed">Dashed Button</Button>
          <Button type="primary" danger>Primary</Button>
          <Button type="dashed" danger>Dashed</Button>
          <Button type="primary" disabled>Primary(disabled)</Button>
        </Space>
      </Card>
      <Card title="图形按钮" bordered={false} style={{ width: "100%" }}>
        <Space>
          <Button icon={<PlusOutlined />} size="large">
            添加
          </Button>
          <Button icon={<EditOutlined />} size="large">
            编辑
          </Button>
          <Button type="primary" icon={<DeleteOutlined />} size="large">
            删除
          </Button>
          <Button shape="circle" icon={<SearchOutlined />} />
        </Space>
      </Card>
      <Card title="Loading..." bordered={false} style={{ width: "100%" }}>
        <Space>
          <Button type="primary" loading={load}>
            Loading
          </Button>
          <Button onClick={handleClick}>切换</Button>
        </Space>
      </Card>
      <Card title="全局通知" bordered={false} style={{ width: "100%" }}>
        <Space>
          <Button onClick={() => openNotificationWithIcon('success')}>Success</Button>
          <Button onClick={() => openNotificationWithIcon('info')}>Info</Button>
          <Button onClick={() => openNotificationWithIcon('warning')}>Warning</Button>
          <Button onClick={() => openNotificationWithIcon('error')}>Error</Button>
        </Space>
      </Card>
      <Card title="Drawer抽屉" bordered={false} style={{ width: "100%" }}>
        <Space>
          <Button type="primary" onClick={showDefaultDrawer}>
            Open Default Size (378px)
          </Button>
          <Button type="primary" onClick={showLargeDrawer}>
            Open Large Size (736px)
          </Button>
        </Space>
        <Drawer
          title={`${size} Drawer`}
          placement="right"
          size={size}
          onClose={onClose}
          visible={visible}
          extra={
            <Space>
              <Button onClick={onClose}>Cancel</Button>
              <Button type="primary" onClick={onClose}>
                OK
              </Button>
            </Space>
          }
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Drawer>
      </Card>
      <Card title="Message全局提示" bordered={false} style={{ width: "100%" }}>
        <Space>
          <Button onClick={success}>Success</Button>
          <Button onClick={error}>Error</Button>
          <Button onClick={warning}>Warning</Button>
        </Space>
      </Card>
    </Space>
  );
}

export default index;